<template>
  <div class="box9">
    <van-nav-bar
      title="精选详情"
      left-text=""
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="hezi1" v-for="(item, key) in jx" :key="key">
      <img :src="item.pic" alt="" />
      <aside class="zi">
        <p class="aa">{{ item.title }}</p>
        <p class="aa">{{item.descript}}</p>
        <van-button round type="info" class="an">查看详情</van-button>
      </aside>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jx: [],
    };
  },
  mounted() {
    this.$http.get("/cms/news/list").then((res) => {
      console.log(res);
      this.jx = res.data.data;
    });
  },
};
</script>

<style lang='scss' scoped>
.box9{
    width: 100%;
}
.hezi1 {
  width: 100%;
  position: relative;
  .aa {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
  }
  img {
    width: 100%;
  }
  .zi{
      width: 100%;
      position: absolute;
      top: 40px;
      left: 0;
      text-align: center;
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: center;
  }
  .an{
      background-color: rgba(255, 0, 0, 0.178);
      border: #ffffff 1px solid;
  }
}
</style>